<template>
  <div class="flex items-center justify-between h-screen">
    <div class="w-[300px] bg-gray-200 h-full border-r border-gray-300">
      <div class="h-[90%] overflow-y-auto">
        <ConversationList :items="items"/>
        <h3 class="text-center text-gray-500 text-sm mt-1">
          {{ t('common.totalConversations', { count: items.length }) }}
        </h3>
      </div>
      <div class="h-[10%] grid grid-cols-2 gap-2 p-2">
        <RouterLink to="/">
          <Button icon-name="radix-icons:chat-bubble" class="w-full">
            {{ t('common.newChat') }}
          </Button>
        </RouterLink>
        <RouterLink to="/settings">
          <Button icon-name="radix-icons:gear" plain class="w-full">
            {{ t('common.settings') }}
          </Button>
        </RouterLink>
      </div>
    </div>
    <div class="h-full flex-1">
      <RouterView />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed } from "vue"
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { initI18n } from './i18n'
import { initProviders } from "./db"
import { useProviderStore } from './stores/provider'
import { useConversationStore } from "./stores/conversation"
import ConversationList from './components/ConversationList.vue'
import Button from './components/Button.vue'

const { t } = useI18n()
const router = useRouter()
const provdierStore = useProviderStore()
const conversationStore = useConversationStore()
const items = computed(() => conversationStore.items)

onMounted(async() => {
  await initI18n()
  await initProviders()
  // 获取初始化需要的数据
  conversationStore.fetchConversations()
  provdierStore.fetchProviders()
})

// 监听菜单事件
window.electronAPI.onMenuNewConversation(() => {
  router.push('/')
})

window.electronAPI.onMenuOpenSettings(() => {
  router.push('/settings')
})

window.electronAPI.onMenuOpenWebsite((site: string) => {
  router.push(`/website/${site}`)
})
</script>